<!-- 下面模板页面 有钱的 可以进一步根据自己的业务需求进行修改美化 和自己的系统衔接-->
<template>
	<view class="content">
		<view class="order_details_1">
			<view class="order_details_7">
				<text class="status">订单创建成功</text>
				<text class="smallTitle">订单详情</text>
			</view>
			<view class="order_details_2">
				<view class="goods">
					<view v-for="(item, index) in goodslist" :key="index" class="row">
						<image :src="'http://1.14.101.56:82/'+item.pic" mode="scaleToFill" border="0" class="pic"></image>
						<view class="order_details_10">
							<text decode="true"
								style="font-size: 5px;text-overflow: ellipsis;-webkit-line-clamp: 1;overflow: hidden;"
								class="good">{{item.good}}</text>
							<text decode="true" class="num">{{item.num}}</text>
						</view>
						<text decode="true" class="money">{{item.money}}</text>
					</view>
				</view>
				<view class="order_details_15">
					<text decode="true" class="order_details_16">共{{item.num}}件小计￥{{param.price}}元</text>
				</view>
			</view>
			<view class="order_details_2">
				<text>个性化包装：</text>
				<uni-data-picker placeholder="请选择" popup-title="请选择您的包装" :localdata="dataTree" v-model="classes"
					@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
			</view>
			<view class="order_details_2">
				<text>配送方式：</text>
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
			</view>
			<view class="order_details_2">
				<text>配送时间：</text>
				<uni-section :title="'配送时间：' + datetimesingle" type="line"></uni-section>
				<view class="example-body">
					<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
				</view>
			</view>
			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff" @change="change">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<!-- <uni-section  title="只选择图片" type="line"> -->
						<view class="img">
							<image src="/static/images/Cache.png"></image>
						</view>
						<view class="example-body">

							<uni-file-picker limit="4" title="请上传支付凭证"></uni-file-picker>
							<view class="button">
							<button  type="primary" @click="close"><text style="font-size: 10px;">取消</text></button>
							<button  type="primary" @click="queren"><text style="font-size: 10px;">确认</text></button>
							</view>
						</view>
						<!-- </uni-section> -->
					</view>
					
				</uni-popup>
			</view>



			<button @click="toggle('center')" class="btAdd">确认订单</button>

		</view>
	</view>
	</view>
</template>

<script>
	import config from '../../common/config.js'
	export default {
		data() {
			return {
				goodslist: [ 
					{
						good: '实用伴手礼送长辈活动赠品纪念回礼物',
						num: '数量:1',
						pic: 'public/imgs/life/1.png',
						money: '￥300',

					}
				],
				param:[{price:'￥300'}],
				value: 0,
				range: [{
						value: 0,
						text: "到店自取（免费）"
					},
					{
						value: 1,
						text: "配送员配送"
					},

				],
				classes: '1-2',
				dataTree: [{
						text: "包装",
						value: "1-0",
						children: [{
								text: "向日葵礼盒",
								value: "1-1"
							},
							{
								text: "香槟礼盒",
								value: "1-2"
							}
						]
					},
					{
						text: "鲜花",
						value: "2-0",
						children: [{
								text: "玫瑰",
								value: "2-1"
							},
							{
								text: "向日葵",
								value: "2-2"
							}
						]
					},
					{
						text: "贺卡",
						value: "3-0",
						children: [{
								text: "哆啦A梦贺卡",
								value: "2-1"
							},
							{
								text: "小猫咪贺卡",
								value: "2-2"
							}
						]
					}
				],
				value: false,
				// 下面这部分是重点
				//提交订单的请求参数      将以下必填参数动态修改为你的系统商品订单信息
				param: {
					pid: config.id, //商户ID（必填）
					type: "alipay", //支付类型alipay(正常)wxpay（必填）
					out_trade_no: "12343455", //你的系统生成得订单号（必填）
					notify_url: config.notify_url, //异步通知地址（非必填,不填服务器端接收不到付款通知）
					return_url: config.return_url, //支付成功后页面内跳转地址，本地已做轮询（非必填。默认值保留）
					name: "这是一个测试5", //商品名称（必填）
					money: "0.01", //商品价格（必填）number类型
					sitename: "localhost", //当前请求网站地址（非必填，默认值保留）
					sign: "", //签名后字符串（该值不用管，已经封装了自动生成签名字符串）
					sign_type: "MD6", //签名方式（默认值保留）
				}
			}

		},
		onLoad(options) {
			console.log(options);

		},
		methods: {
			onchange(e) {
				const value = e.detail.value
			},

			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},

					close() {
						this.$refs.popup.close()
					}
					,
					queren(){
						let userid=uni.getStorageSync("userid")
						let products=uni.getStorageSync("products")
						uni.request({
							url:"/api/user/order/addOrder",
							method:'POST',
							data:{user_id:userid,
							products:products
							},
							success(res) {
								console.log(res);
							},
							fail() {
								
							}
						})
						
					}
			// uni.showModal({
			// 	title: '提示',
			// 	content: ,
			// 	success: function (res) {
			// 		if (res.confirm) {
			// 			console.log('用户点击确定');
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消');
			// 		}
			// 	}
			// let sings =	config.a(this.param);
			// this.param.sign = sings;
			// 	uni.showLoading({
			// 	    title: '订单提交中'
			// 	});
			// 	uni.request({
			// 	    url: config.submitapi, 
			// 	    data: this.param,
			// 	    header: {
			// 	    },
			// 	    success: (res) => {
			// 			uni.hideLoading();
			// 			uni.navigateTo({
			// 			    url: 'qrcode?paydata='+JSON.stringify(res.data) 
			// 			});

			// 	    }
			// });		
			// 	}
		}
	}
</script>
<style lang="scss" scoped>

	.button {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			flex: 1;
			height: 50px;
			margin: 0 0px;
			border-radius: 5px;
		}
		.button button{
			margin-bottom: 0px;
		}
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.img image {
		height: 40vh;
		width: 65vw;
	}

	.example-body {
		background-color: #fff;
		padding: 10px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	button::after {
		border: none;
		width: auto;
	}

	input {
		outline: none;
		border: none;
		list-style: none;
		width: auto;
	}

	.list_item {
		float: left;
	}

	.ym_hide {
		display: none;
	}

	.ym_show {
		display: block;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}

	.list_horizontal {
		width: auto;
		display: inline-block;
	}

	.order_details_1 {
		white-space: normal;
		width: 100%;
		height: 100%;
		padding: 0upx;
		clear: both;
		float: left;
		background-color: #f6f6f6;
		text-align: left;
		border-radius: 0upx;
		font-size: 8upx;
	}

	.order_details_1 .order_details_7 {
		white-space: normal;
		width: 100%;
		height: 164upx;
		padding-left: 0upx;
		padding-right: 0upx;
		padding-top: 0upx;
		padding-bottom: 20upx;
		clear: both;
		margin-top: 0upx;
		margin-left: 0upx;
		float: left;
		background-color: #ef9b9b;
		text-align: left;
		border-radius: 0upx;
		font-size: 8upx;
	}

	.order_details_1 .order_details_7 .status {
		white-space: normal;
		width: 362upx;
		height: 62upx;
		padding: 0upx;
		clear: both;
		margin-top: 22upx;
		margin-left: 29upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		color: #ffffff;
		font-size: 49upx;
		line-height: 62upx;
	}

	.order_details_1 .order_details_7 .smallTitle {
		white-space: normal;
		width: 452upx;
		height: 38upx;
		padding: 0upx;
		clear: both;
		margin-top: 6upx;
		margin-left: 29upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		color: #ffffff;
		font-size: 26upx;
		line-height: 38upx;
	}

	.order_details_1 .order_details_2 {
		white-space: normal;
		width: 690upx;
		padding: 0upx;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		clear: both;
		margin-top: 20upx;
		margin-left: 29upx;
		float: left;
		background-color: #ffffff;
		text-align: left;
		border-color: #e1e1e1;
		border-width: 1upx;
		border-style: solid;
		border-radius: 15upx;
		font-size: 8upx;
	}

	.order_details_1 .order_details_2 .goods {
		white-space: normal;
		width: 690upx;
		min-height: 121upx;
		padding-left: 0upx;
		padding-right: 0upx;
		padding-top: 0upx;
		padding-bottom: 20upx;
		clear: both;
		margin-top: 0upx;
		margin-left: 0upx;
		float: left;
		text-align: left;
		border-bottom-color: #e1e1e1;
		border-bottom-width: 1upx;
		border-bottom-style: solid;
		border-radius: 0upx;
		font-size: 8upx;
	}

	.order_details_1 .order_details_2 .goods .row {
		white-space: normal;
		width: 643upx;
		height: 113upx;
		padding: 0upx;
		margin-top: 18upx;
		margin-left: 24upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		font-size: 8upx;
	}

	.order_details_1 .order_details_2 .goods .row .pic {
		white-space: normal;
		width: 91upx;
		height: 90upx;
		padding: 0upx;
		margin-top: 13upx;
		margin-left: 4upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		font-size: 8upx;
		line-height: 90upx;
	}

	.order_details_1 .order_details_2 .goods .row .order_details_10 {
		white-space: normal;
		width: 372upx;
		height: 91upx;
		padding: 0upx;
		margin-top: 13upx;
		margin-left: 15upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		font-size: 8upx;
	}

	.order_details_1 .order_details_2 .goods .row .order_details_10 .good {
		white-space: normal;
		width: 366upx;
		height: 43upx;
		padding: 0upx;
		clear: both;
		margin-top: 0upx;
		margin-left: 0upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		color: #646464;
		font-size: 33upx;
		line-height: 43upx;
	}

	.order_details_1 .order_details_2 .goods .row .order_details_10 .num {
		white-space: normal;
		width: 234upx;
		height: 29upx;
		padding: 0upx;
		clear: both;
		margin-top: 12upx;
		margin-left: 0upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		color: #646464;
		font-size: 22upx;
		line-height: 29upx;
	}

	.order_details_1 .order_details_2 .goods .row .money {
		white-space: normal;
		width: 138upx;
		height: 36upx;
		padding: 0upx;
		margin-top: 13upx;
		margin-left: 19upx;
		float: left;
		text-align: right;
		border-radius: 0upx;
		color: #000000;
		font-size: 24upx;
		line-height: 36upx;
	}

	.order_details_1 .order_details_2 .order_details_15 {
		white-space: normal;
		width: 416upx;
		height: 79upx;
		padding: 0upx;
		clear: both;
		margin-top: 33upx;
		margin-left: 265upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		font-size: 8upx;
	}

	.order_details_1 .order_details_2 .order_details_15 .order_details_16 {
		white-space: normal;
		width: 399upx;
		height: 49upx;
		padding: 0upx;
		margin-top: 0upx;
		margin-left: 4upx;
		float: left;
		text-align: right;
		border-radius: 0upx;
		color: #646464;
		font-size: 34upx;
		line-height: 49upx;
	}

	.order_details_1 .banner {
		white-space: normal;
		width: 690upx;
		height: 270upx;
		padding: 0upx;
		clear: both;
		margin-top: 100upx;
		margin-left: 29upx;
		float: left;
		text-align: left;
		border-radius: 0upx;
		font-size: 8upx;
		line-height: 270upx;
	}

	.order_details_1 .btAdd {
		white-space: normal;
		width: 690upx;
		height: 87upx;
		padding: 0upx;
		clear: both;
		margin-top: 45upx;
		margin-left: 29upx;
		float: left;
		background-color: #ef9b9b;
		text-align: center;
		justify-content: center;
		border-radius: 40upx;
		color: #ffffff;
		font-size: 36upx;
		line-height: 87upx;
	}
</style>
